<template>
  <x-layout bg-color="#fff">
    <template #scroll>
      <view
        class=" flex-col flex"
      >
        <view
          class="w-100% flex flex-col justify-center items-center gap-40rpx bg-#fd7e25 h-300"
        >
          <view
            class="color-white font-700 text-72"
          >
            实时热搜
          </view>
          <view
            class=" font-700 text-36 bg-white border-rd-16rpx color-#ed7b38 p-[10rpx_40rpx]"
          >
            互联网热搜资讯全知道
          </view>
        </view>
        <view
          class="flex items-center gap-10rpx p-20rpx font-700 text-32 color-#f7532f bg-#fff7f5"
        >
          <image class="w-32 h-32" src="@/static/image/fire.svg" />
          <view>{{ name }}</view>
        </view>
        <view class="flex flex-col">
          <view
            v-for="(item,index) in listData"
            :key="index"
            class="flex justify-between  gap-20rpx  item-handle p-[24rpx_20rpx]"
            style="border-bottom: 1px solid #eeeeee;"
            @click="openPopup(item)"
          >
            <view class="flex-1 min-w-0 flex gap-20rpx text-32 items-center">
              <view :class="index===0?'index-one':index===1?'index-two':index===2?'index-three':'index-normal'">
                {{ item.index }}
              </view>
              <view
                class="truncate flex-1 min-w-0 color-#585858"
              >
                {{ item.title }}
              </view>
              <view
                class="text-28 color-#bfbfbf"
              >
                {{ item.hot }}
              </view>
            </view>
            <u-icon name="arrow-right" color="#b1b1b1" size="14" />
          </view>
        </view>
        <u-popup
          :show="show"
          :round="10"
          mode="bottom"
          @close="onClose"
        >
          <view class="flex flex-col gap-20rpx p-20rpx">
            <view class="color-#333 flex items-center gap-20rpx text-28 ">
              <view
                class="color-white bg-#fac940 p-[8rpx_16rpx] border-rd-8rpx"
              >
                {{ name }}
              </view>
              <view class="text-32 flex-1 min-w-0">
                {{ curData.title }}
              </view>
            </view>
            <view
              class="flex items-center  text-32 color-#ed9e65 pb-60rpx gap-50rpx"
            >
              <view class="flex gap-10rpx items-center">
                <u-icon name="share" color="#ed9e65" size="16" />
                <view @click="copyLink">
                  复制链接
                </view>
              </view>
              <view class="flex gap-10rpx items-center">
                <u-icon name="file-text" color="#ed9e65" size="16" />
                <view @click="copyTitle">
                  复制标题
                </view>
              </view>
            </view>
          </view>
        </u-popup>
      </view>
    </template>
  </x-layout>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useRequest } from '@/hooks'
import { hotlist } from '@/api/vvan'

const listData = ref([])

const show = ref(false)

const name = ref('')
const curData = ref({})

onLoad((options) => {
  if (options.type) {
    getHotList(options.type)
  }

  if (options.name) {
    uni.setNavigationBarTitle({
      title: options.name
    })
    name.value = options.name
  }
})

const getHotList = async (type) => {
  const { data = {} } = await useRequest(hotlist, { type })
  listData.value = data
}

const openPopup = (item) => {
  show.value = true
  curData.value = item || {}
}
const onClose = () => {
  show.value = false
}

const copyLink = () => {
  uni.setClipboardData({
    data: curData.value?.mobilUrl || '',
    success (res) {
      uni.getClipboardData({
        success (res) {
          uni.showToast({
            title: '复制成功'
          })
        }
      })
    }
  })
}
const copyTitle = () => {
  uni.setClipboardData({
    data: curData.value?.title || '',
    success (res) {
      uni.getClipboardData({
        success (res) {
          uni.showToast({
            title: '复制成功'
          })
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.index-normal {
  color: #c7c7c7;
}
.index-one {
  color: #cc4758;
}
.index-two {
  color: #dc994f;
}
.index-three {
  color: #f5b45b;
}
.item-handle {
  &:active {
    background-color: #eeeeee;
  }
}
</style>
